<!-- 易宝商户号-->
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="商户名称" prop="storeCode">
        <el-input
          v-model="queryParams.storeCode"
          placeholder="请输入"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="签约状态" prop="category">
        <el-select
          v-model="queryParams.category"
          placeholder="请选择"
          style="width: 100%"
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="item in categoryoptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-button type="primary" size="small" @click="handleedit('add')"
        >新增</el-button
      >
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      ref="multipleTable"
      class="multipleTable"
      v-loading="loading"
      :data="easybaoList"
    >
      <el-table-column label="序号" align="center" prop="id" width="100">
        <template slot-scope="scope">
          <div>
            {{
              scope.$index +
              (queryParams.pageNum - 1) * queryParams.pageSize +
              1
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="易宝商户号"
        align="center"
        prop="storeCode"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        :label="'法人姓名\n法人身份证号'"
        width="200"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.legalName }}
            {{ scope.row.legalLi }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="商户类型"
        align="center"
        prop="signType"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{
            getdictlabel(
              scope.row,
              signTypeoptions,
              "signType",
              "dictValue",
              "dictLabel"
            )
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="商户名称"
        align="center"
        prop="signName"
        width="100px"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.signName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="商户简称"
        align="center"
        prop="shortName"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        label="签约状态"
        align="center"
        prop="state"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{
            getdictlabel(
              scope.row,
              categoryoptions,
              "category",
              "dictValue",
              "dictLabel"
            )
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="申请日期"
        align="center"
        prop="creattime"
        width="100"
      >
      </el-table-column>
      <el-table-column
        label="完成签约日期"
        align="center"
        prop="updatetime"
        width="100"
      >
      </el-table-column>
      <el-table-column
        label="备注"
        align="center"
        prop="remark"
        width="200"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        prop="opration"
        width="200"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            icon="el-icon-edit"
            @click="handleedit('edit', scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            size="mini"
            icon="el-icon-more"
            @click="handleedit('more', scope.row)"
            >更多</el-button
          >
          <el-button
            type="text"
            size="mini"
            icon="el-icon-delete"
            style="color: red"
            @click="handleDelete('del', scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改公告对话框 -->
    <el-dialog
      :title="title"
      :visible="open"
      width="900px"
      append-to-body
      :before-close="handeclose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <div class="smal-title">商户主体信息</div>
        <el-row>
          <el-col :span="11">
            <el-form-item label="商户签约类型:" prop="signType">
              <el-select
                v-model="form.signType"
                :disabled="isdisable"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in signTypeoptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业主体名称:" prop="signName">
              <el-input
                v-model="form.signName"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
              <div style="color: #999; font-size: 10px">
                与营业执照的主体名称一致
              </div>
            </el-form-item>
            <el-form-item label="组织机构代码:" prop="organizationCode">
              <el-input
                v-model="form.organizationCode"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
            </el-form-item>
            <el-form-item label="开户证明:" prop="openingCertificate">
              <el-select
                v-model="form.openingCertificate"
                :disabled="isdisable"
                placeholder="请选择"
                style="width: 100%"
                @change="changeCertificate"
              >
                <el-option
                  v-for="item in openingCertifioptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="开户许可证编号:"
              prop="openAccountLicenceNo"
              v-if="form.openingCertificate == '2'"
            >
              <el-input
                v-model="form.openAccountLicenceNo"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
            </el-form-item>
            <el-form-item
              label="基本存款账户编号:"
              prop="openAccountLicenceNo"
              v-else
            >
              <el-input
                v-model="form.openAccountLicenceNo"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="统一社会信用代码:" prop="licenceNo">
              <el-input
                v-model="form.licenceNo"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
            </el-form-item>
            <el-form-item label="商户简称:" prop="shortName">
              <el-input
                v-model="form.shortName"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
              <div style="color: #999; font-size: 10px">
                将在收银台页面或者支付完成页向买家展示
              </div>
            </el-form-item>
            <el-form-item label="营业执照(副本):" prop="licenceUrl">
              <ImageUpload
                :limit="1"
                :fileSize="fileSize"
                :isShowTip="isShowTip"
                :fileType="fileType"
                uploadtype="image"
                :fileList.sync="form.licenceUrl"
              />
            </el-form-item>
            <el-form-item
              label="基本存款账户信息:"
              prop="openAccountLicenceUrl"
              v-if="form.openingCertificate == '1'"
            >
              <el-row>
                <el-col :span="16">
                  <ImageUpload
                    :limit="1"
                    :fileSize="fileSize"
                    :isShowTip="isShowTip"
                    :fileType="fileType"
                    uploadtype="image"
                    :fileList.sync="form.openAccountLicenceUrl"
                  />
                </el-col>
                <el-col :span="8">
                  <el-image
                    style="width: 80px; height: 80px; margin-left: 30px"
                    :src="openAccountLicenceUrl"
                    :preview-src-list="srcList"
                  >
                  </el-image>
                  <div
                    style="
                      margin-left: 45px;
                      font-size: 10px;
                      white-space: nowrap;
                    "
                  >
                    示例图片
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item
              label="开户许可证照片:"
              prop="openAccountLicenceUrl"
              v-else
            >
              <el-row>
                <el-col :span="16">
                  <ImageUpload
                    :limit="1"
                    :fileSize="fileSize"
                    :isShowTip="isShowTip"
                    :fileType="fileType"
                    uploadtype="image"
                    :fileList.sync="form.openAccountLicenceUrl"
                  />
                </el-col>
                <el-col :span="8">
                  <el-image
                    style="width: 80px; height: 80px; margin-left: 30px"
                    :src="openAccountLicenceUrl"
                    :preview-src-list="srcList"
                  >
                  </el-image>
                  <div
                    style="
                      margin-left: 45px;
                      font-size: 10px;
                      white-space: nowrap;
                    "
                  >
                    示例图片
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="smal-title">商户法人信息</div>
        <el-row>
          <el-col :span="11">
            <el-form-item label="法人姓名:" prop="legalName">
              <el-input
                v-model="form.legalName"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
              <div style="color: #999; font-size: 10px">
                请填写经营者/法人对应身份证件的姓名
              </div>
            </el-form-item>
            <el-form-item label="法人证件号码:" prop="legalLicenceNo">
              <el-input
                v-model="form.legalLicenceNo"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
            </el-form-item>
            <el-form-item label="身份证正面照:" prop="legalLicenceFrontUrl">
              <ImageUpload
                :limit="1"
                :fileSize="fileSize"
                :isShowTip="isShowTip"
                :fileType="fileType"
                uploadtype="image"
                :fileList.sync="form.legalLicenceFrontUrl"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="法人证件类型:" prop="legalLicenceType">
              <el-select
                v-model="form.legalLicenceType"
                :disabled="isdisable"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in legalcertifioptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
              <div style="color: #999; font-size: 10px; visibility: hidden">
                请填写经营者/法人对应身份证件的姓名
              </div>
            </el-form-item>
            <el-form-item
              label="法人证件号码:"
              prop="legalLicenceNo"
              style="visibility: hidden"
            >
              <el-input
                v-model="form.legalLicenceNo"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
            </el-form-item>

            <el-form-item label="身份证反面照:" prop="legalLicenceBackUrl">
              <ImageUpload
                :limit="1"
                :fileSize="fileSize"
                :isShowTip="isShowTip"
                :fileType="fileType"
                uploadtype="image"
                :fileList.sync="form.legalLicenceBackUrl"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="smal-title">商户联系人信息</div>
        <el-row>
          <el-col :span="11">
            <el-form-item label="联系人姓名:" prop="contactName">
              <el-input
                v-model="form.contactName"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
            </el-form-item>
            <el-form-item label="联系人手机号:" prop="contactMobile">
              <el-input
                v-model="form.contactMobile"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
              <div style="color: #999; font-size: 10px">
                填写真实手机号，后续签约需要用到
              </div>
            </el-form-item>
            <el-form-item label="客服电话:" prop="servicePhone">
              <el-input
                v-model="form.servicePhone"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
              <div style="color: #999; font-size: 10px">
                展示在订单支付详情，方便买家联系商家
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="联系人身份证号码:" prop="contactLicenceNo">
              <el-input
                v-model="form.contactLicenceNo"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
            </el-form-item>
            <el-form-item label="联系人邮箱:" prop="contactEmail">
              <el-input
                v-model="form.contactEmail"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
              <div style="color: #999; font-size: 10px">
                填写真实邮箱，后续签约需要用到
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="smal-title">经营地址</div>
        <el-row>
          <el-col :span="11">
            <el-form-item label="省份/直辖市:" prop="province">
              <el-select
                v-model="form.province"
                :disabled="isdisable"
                placeholder="请选择"
                style="width: 100%"
                @change="changprovince"
              >
                <el-option
                  v-for="item in provinceoptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区县:" prop="district">
              <el-select
                v-model="form.district"
                :disabled="isdisable"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in districtoptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" offset="1">
            <el-form-item label="城市:" prop="city">
              <el-select
                v-model="form.city"
                :disabled="isdisable"
                placeholder="请选择"
                style="width: 100%"
                @change="changcity"
              >
                <el-option
                  v-for="item in cityoptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址:" prop="address">
              <el-input
                v-model="form.address"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="smal-title">结算账户信息</div>
        <el-row>
          <el-col :span="11">
            <el-form-item label="结算方向:" prop="settlementDirection">
              <el-select
                v-model="form.settlementDirection"
                :disabled="isdisable"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option key="ACCOUNT" label="结算到支付账户" value="ACCOUNT">
                </el-option>
                <el-option
                  key="BANKCARD"
                  label="结算到银行账户"
                  value="BANKCARD"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开户银行:" prop="bankofdeposit">
              <el-select
                v-model="form.bankofdeposit"
                :disabled="isdisable"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in bankofdepositoptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
              <div style="color: #999; font-size: 10px">
                目前只能结算到下拉列表中的合作银行，且只能结算到企业法人借记卡
                或 企业对公账户
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="11" offset="1">
            <el-form-item label="银行账户类型:" prop="bankAccountType">
              <el-select
                v-model="form.bankAccountType"
                :disabled="isdisable"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  key="UNIT_SETTLEMENT_CARD"
                  label="单位结算卡"
                  value="UNIT_SETTLEMENT_CARD"
                >
                </el-option>
                <el-option
                  key="ENTERPRISE_ACCOUNT"
                  label="对公账户"
                  value="ENTERPRISE_ACCOUNT"
                >
                </el-option>
                <el-option
                  key="DEBIT_CARD"
                  label="借记卡"
                  value="DEBIT_CARD"
                >
                </el-option>
                <el-option
                  key="PASSBOOK"
                  label="存折"
                  value="PASSBOOK"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="银行账号:" prop="bankCardNo">
              <el-input
                v-model="form.bankCardNo"
                placeholder="请输入"
                size="small"
                style="width: 100%"
                :disabled="isdisable"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listeasybao,
  addeasybao,
  editeasybao,
  deleasybao,
} from "@/api/easybao";
import Editor from "@/components/Editor";
import selfDirective from "@/utils/selfDirective";
import FileUpload from "@/components/FileUpload/index";
import ImageUpload from "@/components/ImageUpload/index";

export default {
  name: "easybao",
  components: {
    Editor,
    FileUpload,
    ImageUpload,
  },
  data() {
    var validatelicenceNo = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("统一社会信用代码不能为空"));
      } else {
        const reg = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的统一社会信用代码"));
        }
      }
    };

    var validatecontactLicenceNo = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("联系人身份证号码不能为空"));
      } else {
        const reg =
          /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;
        if (!reg.test(value)) {
          return callback(new Error("请输入正确的联系人身份证号码"));
        } else {
          return callback();
        }
      }
    };

    var validatecontactMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("联系人手机号不能为空"));
      } else {
        const reg = /^1[3-9]\d{9}$/;
        if (!reg.test(value)) {
          return callback(new Error("请输入正确的联系人手机号"));
        } else {
          return callback();
        }
      }
    };

    var contactEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("联系人邮箱不能为空"));
      } else {
        const reg = /^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i;
        if (!reg.test(value)) {
          return callback(new Error("请输入正确的联系人邮箱"));
        } else {
          return callback();
        }
      }
    };

    var servicePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("客服电话不能为空"));
      } else {
        const reg = /^((d{3,4})|d{3,4}-|s)?d{7,14}$/;
        if (!reg.test(value)) {
          return callback(new Error("请输入正确的客服电话"));
        } else {
          return callback();
        }
      }
    };

    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公告表格数据
      easybaoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 类型数据字典
      statusOptions: [],
      // 状态数据字典
      typeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      openAccountLicenceUrl:
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      fileSize: 2,
      isShowTip: true,
      fileType: ["jpg", "jpeg", "bmp", "png", "gif", "tiff", "pdf"],
      // 表单校验
      rules: {
        signType: [
          {
            required: true,
            message: "商户签约类型不能为空",
            trigger: "change",
          },
        ],
        licenceNo: [
          {
            required: true,
            validator: validatelicenceNo,
          },
        ],
        legalLicenceNo: [
          {
            required: true,
            message: "法人证件号码不能为空",
            trigger: "change",
          },
        ],
        signName: [
          {
            required: true,
            message: "企业主体名称不能为空",
            trigger: "change",
          },
        ],
        shortName: [
          {
            required: true,
            message: "商户简称不能为空",
            trigger: "change",
          },
        ],
        organizationCode: [
          {
            required: true,
            message: "组织机构代码不能为空",
            trigger: "change",
          },
        ],
        licenceUrl: [
          {
            required: true,
            message: "营业执照不能为空",
            trigger: "change",
          },
        ],
        openingCertificate: [
          {
            required: true,
            message: "开户证明不能为空",
            trigger: "change",
          },
        ],
        openAccountLicenceNo: [
          {
            required: true,
            message: "基本存款账户编号不能为空",
            trigger: "change",
          },
        ],
        openAccountLicenceUrl: [
          {
            required: true,
            message: "基本存款账户信息不能为空",
            trigger: "change",
          },
        ],
        legalName: [
          {
            required: true,
            message: "法人姓名不能为空",
            trigger: "change",
          },
        ],
        legalLicenceType: [
          {
            required: true,
            message: "法人证件类型不能为空",
            trigger: "change",
          },
        ],
        legalLicenceFrontUrl: [
          {
            required: true,
            message: "身份证正面照不能为空",
            trigger: "change",
          },
        ],
        legalLicenceBackUrl: [
          {
            required: true,
            message: "身份证反面照不能为空",
            trigger: "change",
          },
        ],
        contactName: [
          {
            required: true,
            message: "联系人姓名不能为空",
            trigger: "change",
          },
        ],
        contactLicenceNo: [
          {
            required: true,
            validator: validatecontactLicenceNo,
          },
        ],
        contactMobile: [
          {
            required: true,
            validator: validatecontactMobile,
          },
        ],
        contactEmail: [
          {
            required: true,
            validator: contactEmail,
          },
        ],
        servicePhone: [
          {
            required: true,
            validator: servicePhone,
          },
        ],
        bankCardNo: [
          {
            required: true,
            message: "银行账号不能为空",
            trigger: "change",
          },
        ],
        province: [
          {
            required: true,
            message: "省份/直辖市不能为空",
            trigger: "change",
          },
        ],
        city: [
          {
            required: true,
            message: "城市不能为空",
            trigger: "change",
          },
        ],
        district: [
          {
            required: true,
            message: "区县不能为空",
            trigger: "change",
          },
        ],
        address: [
          {
            required: true,
            message: "详细地址不能为空",
            trigger: "change",
          },
        ],
      },
      value: [],
      nationoptions: [],
      categoryoptions: [], //签约类型
      companyoptions: [],
      gysTypeOptions: [],
      signTypeoptions: [], //商户签约类型
      legalcertifioptions: [], //法人证件类型
      bankofdepositoptions: [], //开户银行
      provinceoptions: [], //省份
      cityoptions: [], //城市
      districtoptions: [], //区县
      isdisable: false,
      signTypeoptions: [
        {
          value: "1",
          label: "企业",
        },
        {
          value: "2",
          label: "个体工商户",
        },
      ],
      openingCertifioptions: [
        {
          dictValue: "1",
          dictLabel: "基本存款账户信息",
        },
        {
          dictValue: "2",
          dictLabel: "开户证明",
        },
      ],
    };
  },
  created() {
    this.getList();
    //银行账户开户总行编码
    
    this.getDicts("signing_status").then((response) => {
      this.categoryoptions = response.data;
    });
    this.getDicts("gys-gj").then((response) => {
      this.nationoptions = response.data;
    });
    this.getDicts("yibao-signType").then((response) => {
      this.signTypeoptions = response.data;
    });
    this.getDicts("legal-certificates").then((response) => {
      this.legalcertifioptions = response.data;
    });
    this.getDicts("mian-bank").then((response) => {
      this.bankofdepositoptions = response.data;
    });
    this.getprovince();
    if (this.title == "修改标签") {
      let formdata = this.form;
      this.getcity(formdata.province);
      this.getdistrict(formdata.city);
    }
  },
  methods: {
    getsignType(value) {
      let signTypeoptions = this.signTypeoptions;
      let str = "";
      signTypeoptions.map((item) => {
        if (value == item.value) {
          str = item.label;
        }
      });
      return str;
    },
    changeCertificate(value) {},
    /** 获取省 */
    getprovince() {
      getprovincedata().then((res) => {
        this.provinceoptions = res.data.data;
      });
    },
    changprovince(value) {
      this.$set(this.form, "city", "");
      this.cityoptions = [];
      this.$set(this.form, "district", "");
      this.districtoptions = [];
      this.getcity(value);
    },
    getcity(value) {
      var obj = {
        name: value,
      };
      getcitydata(obj).then((res) => {
        this.cityoptions = res.data.data;
      });
    },
    changcity(value) {
      this.$set(this.form, "district", "");
      this.districtoptions = [];
      this.getdistrict(value);
    },
    getdistrict(value) {
      var obj = {
        name: value,
      };
      getdistrictdata(obj).then((res) => {
        this.districtoptions = res.data.data;
      });
    },
    handleQuery(value) {
      this.getList();
    },
    /** 查询公告列表 */
    handelcopy() {
      copyeasybao().then((res) => {
        this.msgSuccess("复制成功");
      });
    },
    /** 查询公告列表 */
    changeStatus(value) {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询公告列表 */
    getList() {
      this.loading = true;
      listeasybao(this.queryParams).then((response) => {
        var easybaoList = response.rows;
        this.easybaoList = easybaoList;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 公告状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 公告状态字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.typeOptions, row.noticeType);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.resetForm("form");
      this.form = {
        openingCertificate: "1",
        legalLicenceType: "1",
        licenceUrl: [],
        openAccountLicenceUrl: [],
        legalLicenceFrontUrl: [],
        legalLicenceBackUrl: [],
      };
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            editeasybao(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addeasybao(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    handleedit(type, row) {
      this.reset();
      this.open = true;
      if (type == "edit") {
        this.form = row;
        this.title = "修改标签";
        this.isdisable = false;
      } else if (type == "add") {
        this.title = "新增标签";
        this.isdisable = false;
      } else if (type == "more") {
        this.form = row;
        this.isdisable = true;
        this.title = "详情";
      }
    },
    handeclose() {
      this.open = false;
    },
    getdictlabel(row, arr, name, value, label) {
      let str = "";
      arr.map((item) => {
        if (item[value] == row[name]) {
          str = item[label];
        }
      });
      return str;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm("是否确认删除该仓库?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return deleasybao(ids);
        })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(() => {});
    },
    changestate(row) {
      var that = this;
      const statestr = row.state == 1 ? "禁用" : "启用";
      this.$confirm("是否确认" + statestr + "该商户?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        var obj = {
          id: row.id,
          state: row.state == 1 ? 0 : 1,
        };
        editeasybao(obj).then((response) => {
          that.$message.success(statestr + "成功");
          that.getList();
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.radio-box {
  margin-bottom: 10px;
}
.stock {
  text-decoration: underline;
}
.copy {
  color: #999;
  cursor: pointer;
}
.box-card {
  margin-top: 20px;
  .card-title {
    font-weight: 700;
    font-style: normal;
    color: #555555;
  }
  .baseinfo {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #999;
    background-color: #f2f2f2;
    padding-left: 10px;
    border-radius: 5px;
    margin-top: 10px;
  }
}
.smal-title {
  width: 100%;
  padding: 0px 0px 10px 80px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #999;
}

::v-deep {
  .el-table .cell {
    white-space: pre-line !important; /*保留换行符*/
  }
  .el-form-item__content {
    line-height: 20px;
  }
  .el-upload--picture-card {
    width: 50px;
    height: 50px;
    line-height: 58px;
  }
}
</style>